﻿@model ConDes.Modelos.CarritoModel
<script type="text/javascript">
    $(document).ready(function () {
        $(".cargandoAgregarMiCompra").hide();
        mostrarCarro();

        EventBinder($("#finalizarCompra"), "click", irPagar);
        EventBinder($(".compraRemover"), "click", removerProducto);
        EventBinder($("#botonAnterior"), "click", mostrarCarro);
        EventBinder($("#botonSiguiente"), "click", mostrarDatos);
        EventBinder($("#ultimoPaso"), "click", ultimoPaso);
    });

    function removerProducto(e) {
        var idProducto = $(e.currentTarget).attr("idProducto");
        
        $.ajax({
            url: '@Url.Content("~/Tienda/RemoverProducto")',
            data: { idProducto: idProducto } 
        });

        $(e.currentTarget).parent().parent().parent().hide();
    }

    function mostrarCarro() {
        $("#carritoCompra").show();
        $("#botonSiguiente").show();

        $("#datosCompra").hide();
        $("#botonAnterior").hide();
    }

    function mostrarDatos() {
        $("#carritoCompra").hide();
        $("#botonSiguiente").hide();

        $("#datosCompra").show();
        $("#botonAnterior").show();
    }

    function obtenerDatos() {
        return {
            IdEmpresa: $("#empresa").val(),
            Tarjeta: $("#tarjeta").val(),
            Mes: $("#mes").val(),
            Ano: $("#ano").val(),
            Codigo: $("#codigo").val(),
            Nombre: $("#nombre").val(),
            Domicilio: $("#domicilio").val(),
            Localidad: $("#localidad").val(),
            IdProvincia: $("#provincia").val(),
            Email: $("#email").val(),
            Telefono: $("#telefono").val()
        };
    }

    function validar() {
        var datos = obtenerDatos();
        var ok = true;
        
        $(".form-horizontal div").removeClass("has-error");

        if (datos.Tarjeta.length == 0) {
            $("#tarjeta").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Codigo.length == 0) {
            $("#codigo").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Nombre.length == 0) {
            $("#nombre").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Domicilio.length == 0) {
            $("#domicilio").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Localidad.length == 0) {
            $("#localidad").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Email.length == 0) {
            $("#email").parent().addClass("has-error");
            ok = false;
        }
        if (datos.Telefono.length == 0) {
            $("#telefono").parent().addClass("has-error");
            ok = false;
        }

        return ok;
    }

    function ultimoPaso(e) {
        $("#mensajeError").text();

        if (!validar()) {
            $("#mensajeError").text("Por favor complete todos los campos");
            return;
        }
        
        $(e.currentTarget).prop("disabled", true);
        $(".cargandoAgregarMiCompra").show();
        $("input, select").prop("disabled", true);

        $.ajax({
            url: '@Url.Content("~/Tienda/Comprar")',
            data: obtenerDatos(),
            success: function (data) {
                $("#mensajeError").text(data.Resultado);
                $(e.currentTarget).prop("disabled", false);
                $(".cargandoAgregarMiCompra").hide();
                $("input, select").prop("disabled", false);
            },
            error: function () {
                $("#mensajeError").text("Ha ocurrido un error y no pudo realizarse la compra. Por favor revise los datos ó intente nuevamente más tarde");
                $(e.currentTarget).prop("disabled", false);
                $(".cargandoAgregarMiCompra").hide();
                $("input, select").prop("disabled", false);
            }
        });
    }
</script>
<div class="row">
    <div class="col-md-12 contenedorCompraBotones">
        <button id="botonAnterior" class="btn btn-success">Anterior Paso</button>
        <button id="botonSiguiente" class="btn btn-success">Siguiente Paso</button>
    </div>
</div>
<div class="row contenedorCarrito">
    <div id="carritoCompra" class="col-md-12">
        @foreach (ConDes.Modelos.MiCompraItemModel item in Model.Items)
        {
            <div class="compraItem col-md-12">
                <div class="col-md-2 carritoImagen">
                    <img src="@Url.Content("~/Fotos/" + item.Imagen)" />
                </div>
                <div class="col-md-5 violada">
                    <a href="@Url.Content("~/Tienda/VerProducto?idProducto=" + item.IdProducto.ToString())">@item.Nombre</a>
                </div>
                <div class="col-md-4">
                    <div class="contenedorPrecio carritoPrecio">
                        @item.Precio.ToString("C0")
                    </div>
                </div>
                <div class="col-md-1 chotaPuta">
                    <a><img class="compraRemover" idProducto="@item.IdProducto" src="~/Contenido/Sitio/Imagenes/remover.png" /></a>
                </div>
            </div>
        }
        <div class="compraItem col-md-12">
            <div class="col-md-2 carritoImagen">
                
            </div>
            <div class="col-md-5 violada">
                <label>TOTAL</label>
            </div>
            <div class="col-md-4">
                <div class="contenedorPrecio carritoPrecio">
                    @Model.Total.ToString("C0")
                </div>
            </div>
            <div class="col-md-1 chotaPuta">
                
            </div>
        </div>
    </div>
    <div id="datosCompra">
        <h3>Información de Pago</h3>
        <div class="form-horizontal" disabled="disabled">
            <div class="form-group">
                <label class="control-label col-md-3">Empresa:</label>
                <div class="col-md-6">
                    <select id="empresa" class="form-control">
                        @foreach (BLLConDes.CD_Empresa empresa in Model.Empresas)
                        {
                            <option value="@empresa.IdEmpresa">@empresa.Nombre</option>
                        }
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">N° Tarjeta:</label>
                <div class="col-md-6">
                    <input id="tarjeta" type="text" class="form-control carritoComandos" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Fecha de Vencimiento:</label>
                <div class="col-md-2">
                    <select id="mes" class="form-control">
                        @for (int i = 0; i < Model.Meses.Count; i++)
                        {
                            <option value="@(i + 1)">@Model.Meses[i]</option>
                        }
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="ano" class="form-control">
                        @foreach (int año in Model.Años)
                        {
                            <option value="@año">@año</option>
                        }
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Código de Verificación:</label>
                <div class="col-md-2">
                    <input id="codigo" type="text" class="form-control carritoComandos" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Nombre (Como aparece en la tarjeta):</label>
                <div class="col-md-6">
                    <input id="nombre" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Domicilio de facturación:</label>
                <div class="col-md-6">
                    <input id="domicilio" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Localidad:</label>
                <div class="col-md-6">
                    <input id="localidad" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Provincia:</label>
                <div class="col-md-6">
                    <select id="provincia" class="form-control">
                        @foreach(BLLConDes.CD_Provincia item in Model.Provincias)
                        {
                            <option value="@item.IdProvincia">@item.Nombre</option>
                        }
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">E-Mail:</label>
                <div class="col-md-6">
                    <input id="email" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Teléfono:</label>
                <div class="col-md-6">
                    <input id="telefono" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Cuotas (Sin interés):</label>
                <div class="col-md-1">
                    <select class="form-control carritoComandos">
                        <option>1</option>
                        <option>3</option>
                        <option>6</option>
                        <option>12</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12 carritoComandos">
                    <label id="mensajeError" class="text-danger"></label>
                    <div class="cargandoAgregarMiCompra">
                        <img src="~/Contenido/Sitio/Imagenes/loading2.gif" />
                    </div>
                    <button id="ultimoPaso" class="btn btn-success">Ultimo paso: Arreglar Entrega</button>
                </div>
            </div>
        </div>
    </div>
</div>
